<template>
	<z-paging ref="paging" @query="queryList" v-model="rewardList"
	lower-threshold="300"
	show-loading-more-when-reload
	empty-view-text="暂无奖励噢~"
	>
	<view class="container">
		<!-- Tab 切换栏 -->
		<view class="tab-bar">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				class="tab" 
				:class="{ active: currentTab === tab.value }" 
				@click="changeTab(tab.value)">
				{{ tab.label }}
			</view>
		</view>
		
		<view class="reward-list">
			<view v-for="item in filteredRewardList" 
				  :key="item.id" 
				  class="reward-item">
				<image :src="item.reward?.image ? api.BASE_URL + item.reward.image : '/static/default.png'" 
					   mode="aspectFill" 
					   class="reward-img"></image>
				<view class="info">
					<text class="name">{{item.reward?.reward_name || '暂无奖励'}}</text>
					<text class="type">{{formatRewardType(item.reward?.reward_type)}}</text>
					<view class="status-row">
						<text class="status" :class="item.completion_status ? 'success' : 'pending'">
							{{item.completion_status ? '已完成' : '进行中'}}
						</text>
						<text class="review-status" :class="getReviewStatusClass(item.status)">
							{{item.status}}
						</text>
					</view>
					<text class="activity">来自活动: {{item.activity.title}}</text>
					<text class="time">完成时间: {{item.completion_time}}</text>
					<view v-if="item.remark" class="remark" @click="showRemark(item)">
						<text class="iconfont icon-message"></text>
						<text class="remark-text">查看留言</text>
					</view>
				</view>
				<view class="action" @click="viewDetail(item)">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 加载更多 -->
		<uni-load-more :status="loadMoreStatus"></uni-load-more>
		
		<!-- 留言弹窗 -->
		<uni-popup ref="remarkPopup" type="center">
			<view class="remark-modal">
				<view class="modal-header">
					<text class="title">审批留言</text>
					<text class="iconfont icon-close" @click="hideRemark"></text>
				</view>
				<view class="modal-content">
					<view class="status-badge" :class="currentRemark.status">
						{{getReviewStatusText(currentRemark.status)}}
					</view>
					<text class="remark-content">{{currentRemark.remark || '暂无留言'}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
	</z-paging>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { api } from '@/utils/request'

let paging = ref(null)
const rewardList = ref([])
const loadMoreStatus = ref('more')
const remarkPopup = ref(null)
const currentRemark = ref({})
const currentTab = ref(0) // 默认选中“全部”状态

// Tab 切换项
const tabs = [
	{ label: '全部', value: 0 },
	{ label: '未审核', value: 1 },
	{ label: '不通过', value: 2 },
	{ label: '通过', value: 3 }
]

const queryList = async (pageNo, pageSize) => {
	await getRewardList(pageNo, pageSize)
}

// 根据当前选中的 Tab 过滤奖励列表
const filteredRewardList = computed(() => {
	if (currentTab.value === 0) {
		return rewardList.value
	}
	return rewardList.value.filter(item => {
		if (currentTab.value === 1) return item.status === '未审核'
		if (currentTab.value === 2) return item.status === '不通过'
		if (currentTab.value === 3) return item.status === '通过'
	})
})

// 切换 Tab
const changeTab = (value) => {
	currentTab.value = value
}

const formatRewardType = (type) => {
	const types = {
		'physical': '实物奖励',
		'virtual': '虚拟奖励',
		'coupon': '优惠券',
		'points': '积分'
	}
	return types[type] || '-'
}

const viewDetail = (item) => {
	uni.navigateTo({
		url: `/pages/activity/detail?id=${item.activity.id}`
	})
}

const getRewardList = async (pageNo, pageSize) => {
	try {
		const userInfo = uni.getStorageSync('userInfo')
		if(!userInfo) return
		
		const res = await api.request({
			url: '/api/reward/my/',
			method: 'GET',
			data: {
				user_id: userInfo.user_id,
				pageNo,
				pageSize
			}
		})
		
		if(res.code === 200) {
			// rewardList.value = res.data
			paging.value.complete(res.data)
			loadMoreStatus.value = 'noMore'
		}
	} catch(e) {
		console.error(e)
		uni.showToast({
			title: '获取奖励失败',
			icon: 'none'
		})
	}
}

const formatTime = (timeStr) => {
	if (!timeStr) return ''
	return timeStr.replace('T', ' ').split('.')[0]
}

// 获取审核状态文本
const getReviewStatusText = (status) => {
	const statusMap = {
		'未审核': '审核中',
		'已通过': '已通过',
		'已拒绝': '已拒绝'
	}
	return statusMap[status] || status
}

// 获取审核状态样式类
const getReviewStatusClass = (status) => {
	const classMap = {
		'未审核': '未审核',
		'通过': '通过',
		'不通过': '不通过'
	}
	return classMap[status] || ''
}

// 显示留言弹窗
const showRemark = (item) => {
	currentRemark.value = {
		status: item.status,
		remark: item.remark
	}
	remarkPopup.value.open()
}

// 隐藏留言弹窗
const hideRemark = () => {
	remarkPopup.value.close()
}


</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	
	.tab-bar {
		display: flex;
		justify-content: space-around;
		background: #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		
		.tab {
			flex: 1;
			text-align: center;
			padding: 10rpx;
			font-size: 28rpx;
			color: #666;
			cursor: pointer;
			
			&.active {
				color: #1890ff;
				font-weight: bold;
			}
		}
	}
	
	.reward-list {
		.reward-item {
			display: flex;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
			
			.reward-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
				background: #f5f5f5;
			}
			
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				
				.status-row {
					display: flex;
					align-items: center;
					gap: 12rpx;
					margin: 6rpx 0;
				}
				
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.type {
					font-size: 28rpx;
					color: #666;
					margin: 10rpx 0;
				}
				
				.status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					display: inline-block;
					width: fit-content;
					
					&.success {
						background: rgba(82,196,26,0.1);
						color: #52c41a;
					}
					
					&.pending {
						background: rgba(250,173,20,0.1);
						color: #faad14;
					}
				}
				
				.review-status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					display: inline-block;
					width: fit-content;
					margin: 6rpx 0;
					
					&.未审核 {
						color: #1890ff;
					}
					
					&.不通过 {
						color: #f5222d;
					}
					
					&.通过 {
						color: #52c41a;
					}
					
					&.未知状态 {
						color: #999;
					}
				}
				
				.activity {
					font-size: 26rpx;
					color: #999;
				}
				
				.time {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}
				
				.remark {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					padding: 8rpx 0;
					
					.iconfont {
						font-size: 28rpx;
						color: #1890ff;
						margin-right: 8rpx;
					}
					
					.remark-text {
						font-size: 24rpx;
						color: #1890ff;
					}
					
					&:active {
						opacity: 0.7;
					}
				}
			}
			
			.action {
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				
				.iconfont {
					font-size: 40rpx;
					color: #999;
				}
			}
		}
	}
	
	
}

// 留言弹窗样式
.remark-modal {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	
	.modal-header {
		position: relative;
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.icon-close {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 40rpx;
			color: #999;
			padding: 20rpx;
		}
	}
	
	.modal-content {
		padding: 30rpx;
		
		.status-badge {
			display: inline-block;
			padding: 6rpx 20rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
			
			&.通过 {
				background: rgba(82,196,26,0.1);
				color: #52c41a;
			}
			
			&.不通过 {
				background: rgba(245,34,45,0.1);
				color: #f5222d;
			}
			
			&.未审核 {
				background: rgba(24,144,255,0.1);
				color: #1890ff;
			}
		}
		
		.remark-content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}
}
</style> 